<template>
  <el-card :shadow="shadow" style="text-align: left">
    <div style="height: 260px">
      <slot name="header"></slot>
      <el-form size="small"
               :rules="rules"
               :model="value"
               ref="deviceForm"
               label-width="95px"
               label-position="left"
               :disabled="disabled">

        <div class="icon-name-wrapper">
          <div class="icon-wrapper">
            <IconFont :icon="deviceOSOptions[value.os]" class="icon-content"></IconFont>
          </div>
          <el-form-item prop="name" label-width="0px" style="margin-bottom: 0">
            <el-input v-model="value.name"></el-input>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="操作系统" prop="os">
            <el-select v-model="value.os" placeholder="请选择操作系统">
              <el-option
                  v-for="os in Object.keys(deviceOSOptions)"
                  :key="os"
                  :label="os"
                  :value="os"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运行内存" prop="ram">
            <el-input-number v-model="value.ram" controls-position="right" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item label="处理器架构" prop="processorArchitecture">
            <el-select v-model="value.processorArchitecture" placeholder="请选择处理器架构">
              <el-option
                  v-for="architecture in Object.keys(processorArchitectureOptions)"
                  :key="architecture"
                  :value="architecture"
                  :label="architecture"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

      </el-form>
      <slot name="footer"></slot>
    </div>
  </el-card>
</template>

<script>
import {DEVICE_OS_LIST, PROCESSOR_ARCHITECTURE_LIST} from "../const/deviceInfo";
import IconFont from "@/components/new/iconfont/IconFont";

export default {
  name: "DeviceCardEdit",
  components: {IconFont},
  props: {
    value: {
      default: () => {
        return {
          id: -1,
          name: '',
          os: '',
          ram: 1,
          processorArchitecture: ''
        }
      }
    },
    disabled: {
      default: false
    },
    shadow: {
      default: 'hover'
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    validate(callBack) {
      this.$refs['deviceForm'].validate(callBack);
    }
  },
  mounted() {
    this.device = this.value;
  },
  data() {
    return {
      rules: {
        name: [
          {required: true, message: '请输入设备名称', trigger: 'blur'}
        ],
        os: [
          {required: true, message: '请选择操作系统', trigger: 'change'}
        ],
        ram: [
          {required: true}
        ],
        processorArchitecture: [
          {required: true, message: '请选择处理器类型', trigger: 'change'}
        ]
      }
    }
  },
  computed: {
    deviceOSOptions() {
      return DEVICE_OS_LIST;
    },
    processorArchitectureOptions() {
      return PROCESSOR_ARCHITECTURE_LIST;
    },
    device: {
      get(){
        return this.value;
      },
      set(newVal){
        this.$emit('change', newVal);
      }
    }
  },

}
</script>

<style scoped>
.icon-wrapper {
  flex: 0 0 48px;
  margin-right: 47px;
  border-radius: 10px;
  background-color: rgb(79, 102, 197);
  height: 48px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-content {
  color: white;
  line-height: 25px;
  font-size: 25px
}

.icon-name-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 25px;
}
</style>
